import React, { FC } from 'react'
import { ItemLabelWrap } from './style'
import { IconToggle } from '@/pages/manager/components'
import { Avatar } from '@/components/Avatar'
import { UserModel } from '../../blocks/user/interface'
import { useBasicInfoStore } from '../../blocks/basicInfo/store'
export const ListItem: FC<
	UserModel & {
		isCascade: boolean
		tab: string
		openMap: { [uuid: string]: boolean }
		setOpenMap: (val: { [uuid: string]: boolean }) => void
		handleOpenTree: (uuid: string) => void
	}
> = (props) => {
	const { mcc, openMap, tab, nestingLevel, setOpenMap, attr, uuid, handleOpenTree } = props
	const isOpen = openMap[uuid]
	const superMtNum = useBasicInfoStore.getState().superMtNum
	const icon_toggle_flag = !superMtNum && tab === 'all' && mcc.account_type === 10 && !attr?.isSimpleCascade
	/**超大方全部是互动终端级联都是false  非超大方判断 常用终端false  全部判断*/
	const isCascade = superMtNum ? false : tab === 'all' ? mcc.account_type === 10 && !attr?.isSimpleCascade : false
	const handleClick = (e: React.MouseEvent) => {}
	return (
		<ItemLabelWrap
			isCascade={isCascade}
			nestingLevel={nestingLevel}
			isOnline={true}
			isVip={false}
			isSelected={false}
			isMeeting={mcc.account_type === 10}
			isAll={true}
			onClick={handleClick}
		>
			{icon_toggle_flag && (
				<IconToggle
					open={!!isOpen}
					className="icon-toggle"
					onClick={() => {
						handleOpenTree(uuid)
					}}
				/>
			)}

			<div className="avatar">
				<Avatar value={mcc} size={24} />
			</div>
			<div className="name" title={mcc.name}>
				<pre data-mtid={uuid}>{props.mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
